<!--
 * @Description: 折线图
 * @Author: Ronda
 * @Date: 2022-02-16 09:30:06
 * @LastEditors: Ronda
 * @LastEditTime: 2022-05-23 15:28:41
-->
<template>
  <div>
    <div ref="container" style="height: 180px;"></div>
  </div>
</template>

<script>
// 引入多折线构造函数
import { Line } from '@antv/g2plot';
import { get } from '@/utils/request';
// 引入momentjs commonjs
let moment = require('moment');
export default {
  data() {
    return {
      // 临时存放湿度数据
      tempData: [],
    };
  },
  methods: {
    moment,
    async getHumidity() {
      let res = await get('/dashboard/pageQueryTodayData', {
        page: 1,
        pageSize: 1000,
        engineer_id: 4,
        device_id: 5
      });
      let i = 0;
      let j = 0;
      res.data.list.forEach((item, index, arr) => {
        // (需要格式化的时间)(格式化时间的格式)
        item.insert_time = moment(item.insert_time).format('HH:mm');
        arr[0].humidity = 48;
        arr[0].temperature = 18;
        if (i % 100 == 0) {
          var obj = {
            name: "温度",
            insert_time: item.insert_time,
            value: item.temperature,
          };
          var obj1 = {
            name: "湿度",
            insert_time: item.insert_time,
            value: item.humidity,
          }
          this.tempData[j] = obj;
          this.tempData[j + 10] = obj1;
          j = j + 1;
        }
        i = i + 1;
      });
      // this.tempData = res.data.list;
      this.loadCharts();
      // console.log(res, '获取湿度');
    },
    loadCharts() {
      const linePlot = new Line(this.$refs.container, {
        data: this.tempData,
        xField: 'insert_time',
        yField: 'value',
        seriesField: 'name',
        yAxis: {
          // 刻度间距
          tickCount: 4,
          label: {
            style: {
              fill: '#303946',
              fontFamily: "TencentSans",
              fontSiz: 13,
            }
          }
        },
        xAxis: {
          tickCount: 10,
          label: {
            offset: 10,
            style: {
              fill: '#303946',
              fontFamily: "TencentSans",
              fontSize: 13,
            }
          }
        },
        legend: {
          position: 'top',
        },
        smooth: true,
        // @TODO 后续会换一种动画方式
        animation: {
          appear: {
            animation: 'path-in',
            duration: 5000,
          },
        },
      });
      linePlot.render();
    }
  },
  mounted() {
    // this.loadCharts();
    this.getHumidity();
  },
};
</script>
<style scoped></style>